//第几个json
var page = 1;

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5 浏览器执行代码
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            //console.log(xmlhttp.responseText);
            //将字符串转化成数组
            var json = JSON.parse(xmlhttp.responseText);
            //console.log(json.shop);
            //将数组进行for循环
            for(let i = 0;i<json.shop.length;i++){
                console.log(json.shop[i]);
                //创建html结构
                var img = document.createElement('img');
                //var dem = document.querySelector("#img");
                var div = document.createElement('div');
                div.className = "tao-left";
                div.appendChild(img);
                //dem.appendChild(img);
                img.src = json.shop[i].pic;
                console.log(div);
                var h3 = document.createElement('h3');
                h3.innerHTML = json.shop[i].title;
                var p = document.createElement('p');
                p.innerHTML = json.shop[i].desc;
                var p2 = document.createElement('p');
                p2.innerHTML = "￥";
                p2.className = "money";
                var span = document.createElement('span');
                span.innerHTML = json.shop[i].price;
                span.className = "span1";
                var del = document.createElement('del');
                var span_1 = document.createElement('span');
                del.innerHTML = json.shop[i].hua;
                del.className = "hua";
                //console.log(del);
                p2.appendChild(span);
                p2.appendChild(del);
                p2.appendChild(span_1);
                var div1 = document.createElement('div');
                div1.className = "tao-right";
                //var con = document.querySelector("#const");
                div1.appendChild(h3);
                div1.appendChild(p);
                div1.appendChild(p2);
                //console.log(con);

               var div3 = document.createElement('div');
                div3.className = "tao";
                div3.appendChild(div);
                div3.appendChild(div1);

                document.querySelector("#bottom").appendChild(div3)
            }

            //document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    };
    xmlhttp.open("GET",page + ".json",true);
    xmlhttp.send();
}
loadXMLDoc();

document.querySelector("#btn").addEventListener('click',function(){
   if(page >= 4){
       page = 1;
   } else{
       page++;
   }
    //先清空
    document.querySelector("#bottom").innerHTML = "";
    //再取数据放到 div3 里面
    loadXMLDoc();
});